<template>
  <div class="container">
    <el-card class="box-card">
      <el-row>
        <el-col :span="24"
          ><el-breadcrumb
            v-if="!showSubject"
            separator-class="el-icon-arrow-right"
          >
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>学科目录</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="16"
          ><div class="grid-content bg-purple">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="目录名称">
                <el-input v-model="formInline.user"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="formInline.region" placeholder="请选择">
                  <el-option label="启用" value="启用"></el-option>
                  <el-option label="禁用" value="禁用"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="clearBtn">清除</el-button>
                <el-button size="small" type="primary" @click="onSubmit"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <el-button
              v-if="!showSubject"
              type="text"
              class="goback"
              @click="goBack"
            >
              <i class="el-icon-back"></i>
              返回学科
            </el-button>

            <el-button
              size="small"
              style="float: right"
              @click="addSubmit"
              class="addDirectorys"
            >
              <i class="el-icon-edit"></i>
              新增目录
            </el-button>

            <!-- 新增目录弹窗 -->
            <el-dialog
              title="新增目录"
              :visible.sync="showAddSubmit"
              width="400px"
              @close="closeEven"
            >
              <el-form
                ref="fromData"
                :model="form"
                :rules="rules"
                label-width="80px"
              >
                <el-form-item
                  v-if="showSubject"
                  label="所属学科"
                  prop="subjectID"
                >
                  <el-select
                    v-model="form.subjectID"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in getsubjectList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="目录名称" prop="directoryName">
                  <el-input
                    v-model="form.directoryName"
                    autocomplete="off"
                    placeholder="请输入目录名称"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDirectory">取 消</el-button>
                <el-button type="primary" @click="newDirectory"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </div></el-col
        >
      </el-row>

      <el-row class="iconbar">
        <el-col :span="24"
          ><div
            class="grid-content bg-purple-dark"
            style="font-size: 13px; line-height: 18px"
          >
            <i class="el-icon-info"></i>
            <span style="padding: 0 8px 0 8px">数据一共{{ total }}条</span>
          </div></el-col
        >
      </el-row>

      <!-- <directory-dia :catalogList="catalogList" :showAddSubmit="showAddSubmit"></directory-dia> -->
      <!-- 表格区域 -->
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            <template>
              <el-table
                :data="catalogList"
                style="width: 100%"
                :default-sort="{ prop: 'id' }"
              >
                <el-table-column prop="id" label="序号" width="130px">
                </el-table-column>
                <el-table-column
                  prop="subjectName"
                  label="所属学科"
                  width="180"
                >
                </el-table-column>
                <el-table-column prop="directoryName" label="目录名称">
                </el-table-column>
                <el-table-column prop="username" label="创建者">
                </el-table-column>
                <el-table-column prop="" label="创建日期">
                  <template slot-scope="scope">
                    <span>{{ scope.row.addDate | formatTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="totals" label="面试题数量">
                </el-table-column>
                <el-table-column prop="" label="状态">
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.state === 0 ? "已禁用" : "已启用"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="操作">
                  <!-- 加上作用域插槽  插槽里面的模板才能访问到当前组件中的响应式数据 响应式特性才能生效 -->
                  <template slot-scope="scope">
                    <el-button type="text" @click="startSubmit(scope.row)">
                      {{ scope.row.state === 0 ? "启用" : "禁用" }}
                    </el-button>
                    <el-button
                      type="text"
                      @click="AlterSubmit(scope.row)"
                      :disabled="scope.row.state === 0 ? true : false"
                      >修改</el-button
                    >
                    <el-button
                      type="text"
                      :disabled="scope.row.state === 0 ? true : false"
                      @click="delSubmit(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页 -->
              <el-pagination
                @size-change="changeSize"
                @current-change="changePage"
                :current-page.sync="query.page"
                :page-sizes="[5, 10, 20, 50]"
                :page-size.sync="query.pagesize"
                :total="total"
                background
                layout="prev, pager,next,sizes,jumper"
                class="pageBleak"
                hide-on-single-page
              >
              </el-pagination>
            </template>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 修改目录弹窗 -->
    <el-dialog title="修改目录" :visible.sync="showAlterSubmit" width="400px" @close="closeEven">
      <el-form ref="fromData" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="所属学科" prop="subjectID">
          <el-select
            v-model="form.subjectID"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in getsubjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            v-model="form.directoryName"
            autocomplete="off"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAlter">取 消</el-button>
        <el-button type="primary" @click="sureAlter">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'

// import directoryDia from '../../components/directoryDia'
import {
  list,
  add,
  changeState,
  remove,
  detail,
  update
} from '../../api/hmmm/directorys'
import { simple } from '../../api/hmmm/subjects'
export default {
  name: 'dire',
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      query: {
        page: 1, // 当前页
        pagesize: 10 // 一页几条数据
      },
      form: {
        subjectID: '',
        directoryName: ''
      },
      // 校验规则
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'change' }
        ],
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'change' }
        ]
      },
      getsubjectList: [], // 学科简单列表
      catalogList: [], // 接收的列表数据
      total: 0, // 总页数
      showAddSubmit: false, // 新增目录弹窗
      showAlterSubmit: false, // 修改目录
      subjectID: '', // 学科id
      // showDisable: null // 禁用
      // showDisableFalse: false // 启用
      showSubject: true, // 控制新增目录弹窗学科项
      id: ''
    }
  },
  components: {
    // directoryDia
  },
  created () {
    // 判断页面路由后是否有传参
    if (this.$route.query.id) {
      // 有值则将新增的目录去掉学科项
      this.showSubject = false
      // 调用学科获取的列表
      this.subjectList()
    } else {
      // 有值则将新增的目录去掉学科项
      this.showSubject = true
      this.getCatalogList()
    }
  },

  // 直接监听路由(query或者params)this就是当前组件实例对象都可以用watch拿到
  watch: {
    // 当前组件实例对象身上的属性
    // data  props  computed  $route
    $route: function () {
      if (this.$route.query.id) {
        // 有值则将新增的目录去掉学科项
        this.showSubject = false
        // 调用学科获取的列表
        this.subjectList()
      } else {
        // 有值则将新增的目录去掉学科项
        this.showSubject = true
        this.getCatalogList()
      }
    }
  },
  filters: {
    // 格式化入职日期的方法
    formatTime (time) {
      if (!time) return
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  methods: {
    closeEven () {
      this.form = {
        subjectID: '',
        directoryName: ''
      }
      // 重置表单
      this.$refs.fromData.resetFields()
    },
    // 通过学科进入获取列表
    async subjectList () {
      const res = await list({
        page: this.query.page,
        pagesize: this.query.pagesize,
        subjectID: this.$route.query.id
      })
      const resList = res.data.items
      this.catalogList = resList

      // this.form.directoryName = this.$refs.fromData
      // 修改总页数
      this.total = Number(res.data.counts)
      // // 将当前页改为第一页
      // this.query.page = 1
    },

    // 搜索按钮
    async onSubmit () {
      if (this.formInline === '') {
        this.getCatalogList()
        // 将当前页改为第一页
        this.query.page = 1
      } else {
        const query = {
          page: 1,
          pagesize: 10,
          directoryName: this.formInline.user
        }
        if (this.formInline.region) {
          query.state = this.formInline.region === '启用' ? 1 : 0
        }
        const res = await list(query)
        const resList = res.data.items
        this.catalogList = resList
        // 修改总页数
        this.total = Number(res.data.counts)
        // 将当前页改为第一页
        this.query.page = 1
      }
    },

    // 清除按钮
    clearBtn () {
      this.formInline.user = ''
      this.formInline.region = ''

      // 重新渲染一下页面
      this.getCatalogList()
    },

    // 获取目录列表数据
    async getCatalogList () {
      const res = await list(this.query)
      this.catalogList = res.data.items
      this.total = Number(res.data.counts)

      // console.log(res.data.items)
    },

    // 当前页数发生改变时
    async changePage (val) {
      this.query.page = val

      if (this.$route.query.id) {
        // 调用学科获取的列表
        this.subjectList()
      } else {
        // 重新渲染一下页面
        this.getCatalogList()
      }
    },
    // 每页数据量数发生改变时
    changeSize (val) {
      // // 将当前页改为第一页
      this.query.page = 1
      this.query.pagesize = val
      if (this.$route.query.id) {
        // 调用学科获取的列表
        this.subjectList()
      } else {
        // 重新渲染一下页面
        this.getCatalogList()
      }
    },

    // 新增目录
    async addSubmit () {
      this.showAddSubmit = true
      // 调用学科简单列表
      const res = await simple()
      this.getsubjectList = res.data
    },
    // 确定新增目录
    newDirectory () {
      // 兜底验证
      this.$refs.fromData.validate(async (valid) => {
        // 表单没有值则退出
        if (!valid) return
        if (this.$route.query.id) {
          this.form.subjectID = Number(this.$route.query.id)
        }
        // 有值则调用添加目录接口
        await add(this.form)
        // console.log(res)
        // 成功后给用户提示
        this.$message.success('新增目录成功')
        if (this.$route.query.id) {
          // 调用学科获取的列表
          this.subjectList()
        } else {
          // 重新渲染一下页面
          this.getCatalogList()
        }

        // 关闭弹窗
        this.showAddSubmit = false
        // 重置表单
        this.$refs.fromData.resetFields()
      })
    },
    // 取消新增目录
    cancelDirectory () {
      this.showAddSubmit = false
      // 重置表单
      this.$refs.fromData.resetFields()
      this.form.subjectID = ''
    },

    // 点击启用禁用按钮
    async startSubmit (row) {
      const res = await detail(row)
      let state = res.data.state
      state = state === 0 ? 1 : 0
      // console.log(state)
      // 修改当前状态,调用状态api
      const req = await changeState({ id: row.id, state })
      if (req.status === 200) {
        row.state = row.state === 0 ? 1 : 0
        // 成功后给用户提示
        this.$message.success('操作成功')

        // 重新渲染一下页面
        // this.getCatalogList()
      }
    },

    // 删除功能
    delSubmit (data) {
      // 显示弹窗
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 判断当前页是否有数剧,没有的时候页码-1
        if (this.catalogList.length === 1) {
          this.query.page--
          if (this.query.page === 0) {
            this.query.page = 1
          }
        }

        // 调用删除api

        const req = await remove(data)

        if (req.status === 200) {
          // 成功后给用户提示
          this.$message.success('操作成功')
          this.showAlterSubmit = false

          if (this.$route.query.id) {
            // 调用学科获取的列表
            this.subjectList()
          } else {
            // 重新渲染一下页面
            this.getCatalogList()
          }
        }
      })
    },

    // 修改目录
    async AlterSubmit (row) {
      this.showAlterSubmit = true
      // 调用学科简单列表
      const res = await simple()
      this.getsubjectList = res.data

      // 回显数据,目录详情api

      this.form.subjectID = row.subjectID
      this.form.directoryName = row.directoryName

      // 将目前id赋值做确定修改目录
      this.id = row.id
    },

    // 确定修改
    async sureAlter () {
      // 调用修改接口
      const res = await update({ ...this.form, id: this.id })
      // console.log(res)
      if (res.status === 200) {
        // 成功后给用户提示
        this.$message.success('操作成功')
        this.showAlterSubmit = false

        this.form = {
          subjectID: '',
          directoryName: ''
        }
        // 重置表单
        this.$refs.fromData.resetFields()

        if (this.$route.query.id) {
          // 调用学科获取的列表
          this.subjectList()
        } else {
          // 重新渲染一下页面
          this.getCatalogList()
        }
      }
    },
    // 取消修改
    cancelAlter () {
      this.showAlterSubmit = false
      // 重置表单
      // this.$refs.fromData.resetFields()
      this.form = {
        subjectID: '',
        directoryName: ''
      }
    },

    // 返回学科管理
    goBack () {
      this.$router.push('list')
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 10px;
  .iconbar {
    width: 100%;
    padding: 8px 16px;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    opacity: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    background-color: #f4f4f5;
    color: #909399;
  }
  //新增按钮
  .addDirectorys {
    color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;

    .el-icon-edit {
      margin-right: 2px;
    }
  }
  //分页
  .pageBleak {
    float: right;
    margin-top: 20px;
  }

  //弹窗样式
  ::v-deep .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
    // width: 280px;
  }
  //弹窗确定\取消按钮位置
  ::v-deep .el-dialog__footer {
    padding: 10px 20px 20px;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .goback {
    margin-left: 220px;
  }

  //面包屑
  .el-breadcrumb {
    font-size: 14px;
    line-height: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;

    height: 40px;
    text-align: center;
  }
}
</style>
